<template>
	<view class="content bg-drak ft-main">
		<use-navbar :title="title"></use-navbar>
		
		<view class="gap"></view>
		
		<!-- 发票类型 1个人 0企业 -->
		<view class="row dflex padding-lr margin-top">
			<text class="tit dflex">发票类型<text style="color: red;">*</text></text>
			<view :class="[data.type == 1 ? 'bg-base': 'bg-light']" class="item fs-26" @click="data.type = 1">个人</view>
			<view :class="[data.type == 0 ? 'bg-base': 'bg-light']" class="item fs-26" @click="data.type = 0">企业</view>
		</view>
		
		<!-- 个人抬头 -->
		<template v-if="data.type == 1">
			<view class="row dflex padding-lr">
				<text class="tit dflex">个人名称<text style="color: red;">*</text></text>
				<input class="input" type="text" v-model="data.name" placeholder="请输入个人名称"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">手机号码</text>
				<input class="input" type="number" v-model="data.mobile" placeholder="手机号码（选填）"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">电子邮箱</text>
				<input class="input" type="text" v-model="data.email" placeholder="电子邮箱（选填）"
					placeholder-class="placeholder" />
			</view>
		</template>
		
		<!-- 企业抬头 -->
		<template v-if="data.type == 0">
			<view class="row dflex padding-lr">
				<text class="tit">企业名称<text style="color: red;">*</text></text>
				<input class="input" type="text" v-model="data.name" placeholder="请输入企业名称"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">企业税号<text style="color: red;">*</text></text>
				<input class="input" type="text" v-model="data.tax_id" placeholder="请输入企业税号"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">企业电话</text>
				<input class="input" type="number" v-model="data.telephone" placeholder="企业电话（选填）"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">开户银行</text>
				<input class="input" type="text" v-model="data.bank_name" placeholder="开户银行（选填）"
					placeholder-class="placeholder" />
			</view>
			<view class="row dflex padding-lr">
				<text class="tit">银行账号</text>
				<input class="input" type="text" v-model="data.bank_account" placeholder="银行账号（选填）"
					placeholder-class="placeholder" />
			</view>
			<view class="use-area margin-lr-sm">
				<view class="tit">企业地址</view>
				<textarea class="bg-drak w-full border-radius-sm margin-top-sm padding fs-sm" 
					style="min-height: 70px;" v-model="data.address" maxlength="120" 
					auto-height placeholder="企业地址（选填）"></textarea>
			</view>
		</template>
		
		<view class="row dflex-b padding-lr">
			<text class="tit">设为默认</text>
			<switch :checked="invoiceDefault" color="#FF6A6C" @change="switchChange" />
		</view>

		<view class="padding w-full margin-top-big">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	const __name = 'usemall-member-invoice';
	export default {
		computed: {
			...mapState(['islogin', 'member'])
		},
		data() {
			return {
				invoiceDefault: false,
				data: {
					type: 1,
					name: '',
					email: '',
					mobile: '',
					tax_id: '',
					address: '',
					telephone: '',
					bank_name: '',
					bank_account: '',
					is_default: 0
				},
				id: 0,
				type: 'add',
				title: ''
			};
		},
		onLoad(res) {
			this.title = '新增发票抬头';
			if (res.type === 'edit') {
				this.title = '编辑发票抬头';
				this.id = res.id;

				this.$db[__name].tofirst(this.id).then(res => {
					if (res.code == 200) {
						for (let key in this.data) {
							this.data[key] = res.datas[key];
						}
						this.invoiceDefault = this.data.is_default == 1;
					}
				});
			} else {
				if (this.islogin && this.member.member_mobile) {
					this.data.mobile = this.member.member_mobile;
				}
			}

			this.type = res.type || 'add';
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		methods: {
			switchChange(e) {
				this.invoiceDefault = e.detail.value;
			},
			// 提交
			async submit() {
				this.data.is_default =  this.invoiceDefault ? 1 : 0;
				
				// 企业抬头
				if (this.data.type == 0) {
					if (!this.data.name) {
						this.$api.msg('请填写企业名称');
						return;
					}
					if (!this.data.tax_id) {
						this.$api.msg('请填写企业税号');
						return;
					}
				} 
				
				// 个人抬头
				if (this.data.type == 1) {
					if (!this.data.name) {
						this.$api.msg('请填写个人姓名');
						return;
					}
					if (!/(^1[0-9][0-9]{9}$)/.test(this.data.mobile)) {
						this.$api.msg('请输入正确的手机号码');
						return;
					}
				}

				if (this.invoiceDefault) {
					// 把默认为是的改成 否
					await this.$db[__name]
						.config({ hideLoading: false })
						.where('create_uid == $env.uid && is_default == 1')
						.update({
							is_default: 0
						});
				}
				
				if (this.type == 'add') {

					this.$db[__name].add(this.data).then(res => {
						if (res.code === 200) {
							this.$api.msg('添加成功');
							this.$api.timerout(() => {
								uni.navigateBack();
							}, 100);
							return;
						} 
						
						this.$api.msg(res.msg);
					});
				} else {
					if (!this.id) {
						this.$api.msg('当前ID异常，编辑失败');
						return;
					}
					
					this.$db[__name].update(this.id, this.data).then(res => {
						if (res.code === 200) {
							this.$api.msg('编辑成功');
							this.$api.timerout(() => {
								uni.navigateBack();
							}, 100);
							return;
						}
						 
						this.$api.msg(res.msg);
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	
	.item {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 16rpx;
	}

	.row {
		background: #fff;
		position: relative;
		height: 110rpx;
		margin: 20rpx;
		border-radius: 20rpx;

		.tit {
			flex-shrink: 0;
			width: 150rpx;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			padding-left: 0;
		}

		.input_t {
			color: #333;
		}
	}
</style>
